<div class="row">
    <div class="col-sm-12">

    <h2>Rangeslider</h2>

    <p>
        <input type="range"/>
        <script>
            $('input[type="range"]').rangeslider({
                // Feature detection
                polyfill: false
            });
        </script>
    </p>

    <h2>Toolbar + Buttons</h2>

    <div class="toolbar">
        <div style="float: left"><a class="toolbar-button" href=""><span class="entypo-plus"></span></a>
            <a class="toolbar-button" href=""><span class="entypo-minus"></span></a>
            <a class="toolbar-button" href="">Close</a></div>
        <div style="float: right">
                <span class="search-input">
                    <input type="search" placeholder="Webkit Search" results="5"/>
                </span>
        </div>

    </div>
    <hr/>
    <div class="toolbar">
        <div style="float: left"><a class="toolbar-button" href=""><span class="entypo-plus"></span></a>
            <a class="toolbar-button" href=""><span class="entypo-minus"></span></a>
            <a class="toolbar-button" href="">Close</a></div>
        <div style="float: right">
                <span class="search-input">
                    <span class="entypo-search"></span>
                    <input type="text" class="mvx-search" placeholder="Non Webkit Search"/>
                </span>
        </div>

    </div>

    <hr/>

    <h2>Tweaked Native Webkit Search Input (Don't use on non webkit.)</h2>
    <input type="search" results="5"/>

    <hr/>
    <h2>Cross Browser Search Input</h2>
        <span class="search-input">
            <span class="entypo-search"></span>
            <input type="text" class="mvx-search" placeholder="Filter Warnings"/>
        </span>


        <h2>Webkit Default Button</h2>
        <button>Default Webkit Button</button>

    <h2>Toggles</h2>

    <div class="osx-switch">
        <span class="osx-switch-label osx-switch-label-active">ON</span>
        <span class="osx-switch-label osx-switch-label-inactive">OFF</span>
        <label class="switch-light switch-candy" onclick="">
            <input type="checkbox">
            <a></a>
        </label>
    </div>

    <div class="ui-switch on">
        <div class="toggler"></div>
    </div>
    <div class="ui-label">UI Label</div>
    <script>
        $(".ui-switch").click(function (e) {
            $(this).toggleClass("on");
        });
    </script>

    <hr/>
    <h2>State Indicators</h2>
    <span class="on-badge"></span> Online Badge<br>
    <span class="off-badge"></span> Offline Badge


    <hr/>

        <h2>Aqua Buttons</h2>

        <p class="indent">
            <a class="btn btn-default">Standard</a>
            <a class="btn btn-primary">Primary</a>
            <a class="btn disabled">Disabled</a>
        </p>
        <hr/>

        <h2>Small Aqua Buttons</h2>

        <p class="indent">
            <a class="btn btn-capsule">Uninstall</a>
            <a class="btn btn-capsule disabled">Uninstall</a>
            <a class="btn btn-sm">Small Button ...</a>
            <a class="btn btn-sm disabled">Small Button ...</a>
        </p>
        <hr/>

        <h2>Help Button</h2>

        <p class="indent">
            <!--<pre>&lt;a class="btn btn-help" href=""&gt;&lt;span class="entypo-help"&gt;&lt;/span&gt;&lt;/a&gt;</pre>-->
            <a class="btn btn-help" href=""><span class="entypo-help"></span></a>
        </p>
        <hr/>

        <h2>Modern Buttons</h2>

        <p class="indent">
            <a class="btn btn-modern">Modern</a>
            <a class="btn btn-modern disabled">Modern Disabled</a>
            <a class="btn btn-modern btn-lg">Modern Large</a>
            <a class="btn btn-modern btn-lg disabled">Modern Large Disabled</a>
            <a class="btn btn-modern btn-sm">Modern Small</a>


        </p>
        <hr/>
        <h2>Buttons on Grey</h2>

        <div class="grey-bg" style="text-align: right; padding: 10px">
            <a href="" class="btn btn-on-grey">Abbrechen</a>
            <a href="" class="btn btn-on-grey">OK</a>
        </div>

        <hr/>
        <h2>Button Group</h2>

        <div class="btn-group">
            <button type="button" class="btn btn-default">Left</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Right</button>
        </div>


        <div class="btn-group-vertical">
            <button type="button" class="btn btn-default">Top</button>
            <button type="button" class="btn btn-default">Middle</button>
            <button type="button" class="btn btn-default">Bottom</button>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-default">1</button>
            <button type="button" class="btn btn-default">2</button>

            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    Dropdown
                    <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                    <li><a href="#">Dropdown link</a></li>
                    <li><a href="#">Dropdown link</a></li>
                </ul>
            </div>
        </div>

        <!-- Single button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                Action <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

        <!-- Split button -->
        <div class="btn-group">
            <button type="button" class="btn btn-default">Action</button>
            <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="caret"></span>
                <span class="sr-only">Toggle Dropdown</span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
            </ul>
        </div>

        <div class="dropdown btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="">
                <span class="entypo-cog"></span>
                <span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li class="disabled"><a href="">Show Warning Details</a></li>
                <li><a href="">Clear Warnings</a></li>
            </ul>
        </div>

        <div class="btn-group">
            <button type="button" class="btn btn-modern"><span class="entypo-plus"></span></button>
            <button type="button" class="btn btn-modern"><span class="entypo-minus"></span></button>
        </div>

        <hr/>


    </div>
</div>
